혼자 공부하는 바이브 코딩 — 4장 클로드 코드 실전 활용 딥다이브 학습 노트

출처: 혼자 공부하는 바이브 코딩 with 클로드 코드 (조태호) | 참고: https://github.com/taehojo/vibecoding

4장에서 다루는 내용

• 단계별 프롬프트 전략 — PRD → 5단계 프롬프트로 변환 → 클로드 코드에서 실행
• 클로드 코드 초기 설정 명령어 — /init, /status, /model, /help
• 세션 관리와 작업 재개 — --resume, /resume, --continue, 자동 승인 모드
• 컨텍스트 관리 — /context, /compact, 토큰 절약
• 프로젝트 개선 — 캡처 이미지 전달, @ 기호, /config, /doctor, /export

전체 흐름도

[04-1 단계별 프롬프트]        [04-2 작업 재개/효율성]       [04-3 프로젝트 관리]
    |                           |                           |
    v                           v                           v
+-------------------+   +---------------------+   +---------------------+
| 클로드 웹 → PRD    |   | 세션 관리             |   | 멀티모달 입력       |
| PRD → 5단계 프롬프트|   | --resume로 세션 복원  |   | 캡처 이미지 전달     |
|                   |   | Shift+Tab 자동 승인  |   | @ 기호로 참조       |
| 클로드 코드 실행:   |   |                     |   |                     |
| Step1: HTML 구조   |   | 컨텍스트 관리         |   | 설정과 진단          |
| Step2: 카테고리+UI  |   | /context 확인       |   | /config, /doctor   |
| Step3: 대시보드     |   | /compact 압축       |   | /export 문서화      |
| Step4: 다크 모드    |   |                     |   |                     |
| Step5: 최종 완성    |   |                     |   |                     |
+-------------------+   +---------------------+   +---------------------+

선수 지식 체크리스트

• [ ] 2장: 5W1H, PRD 작성법
• [ ] 3장: 클로드 코드 설치, CLAUDE.md, /init
• [ ] 클로드 Pro 이상 유료 플랜 구독

핵심 키워드

04-1 단계별 프롬프트와 함께 클로드 코드 명령어 익히기

한 줄 요약

클로드 웹에서 PRD를 작성하고, 이를 5단계 프롬프트로 변환하여 클로드 코드에서 할 일 관리 앱을 완성한다.

쉬운 설명 (요리 레시피 비유)

"요리할 때 한꺼번에 모든 재료를 냄비에 넣지 않는다. ① 밥 짓기 → ② 국 끓이기 → ③ 반찬 만들기 → ④ 상 차리기 순서로 진행한다. 앱 개발도 마찬가지로 단계별로 기능을 추가하며 완성한다."

실습 프로젝트: 할 일 관리 앱 (My Tasks)

완성된 앱 기능:
- 할 일 추가, 수정, 삭제 (CRUD)
- 완료 체크 기능
- 카테고리 분류 (업무/개인/공부)
- 진행률 대시보드
- 다크 모드
- 데이터 내보내기/가져오기 (JSON)
- 정렬 옵션 (날짜순, 카테고리순, 완료 상태순)
- 드래그 앤 드롭 정렬
- 키보드 단축키 (Alt+N, Alt+1~4)
- 오늘의 격언 랜덤 표시

기술 스택: 순수 HTML, CSS, JavaScript (프레임워크 없음)
데이터 저장: localStorage (브라우저 내장)

워크플로우: 기획(웹) → 구현(코드)

┌─────────────────┐     ┌─────────────────────┐
│ 클로드 웹        │     │ 클로드 코드           │
│                 │     │                     │
│ • PRD 작성      │ ──> │ • 뼈대 (Step 1)     │
│ • 단계별 프롬프트│     │ • 기능 (Step 2)     │
│   전략 수립      │     │ • 디자인 (Step 3)   │
│                 │     │ • 고급 기능 (Step 4) │
│ 기획 단계        │     │ • 최종 완성 (Step 5) │
└─────────────────┘     └─────────────────────┘

5단계 프롬프트 실행

Step 1: 기본 구조 및 핵심 기능 구현

프롬프트:
> Step 1: 기본 구조 및 핵심 기능 구현
  할 일 관리 앱의 기본 구조를 만들어주세요.

  요구사항:
  1. index.html, style.css, script.js 세 개의 파일로 구성
  2. HTML 구조: 앱 제목 "My Tasks", 할 일 입력창 + 추가 버튼,
     할 일 목록을 표시할 컨테이너
  3. JavaScript 기능: 할 일 추가, 삭제, 체크박스 토글
  4. localStorage에 데이터 저장
  5. 기본 CSS 스타일링

→ 결과: 할 일 추가/삭제/체크가 가능한 기본 앱 완성

Step 2: 카테고리 기능 및 UI 개선

프롬프트:
> Step 2: 카테고리 기능 및 UI 개선
  1. 카테고리 기능: 업무(work), 개인(personal), 공부(study) 3가지
  2. UI 개선: 카테고리별 색상, 필터 버튼, 생성 시간 표시
  3. 데이터 구조 업데이트: category 필드 추가

→ 결과: 업무/개인/공부 카테고리로 분류되는 할 일 앱

Step 3: 진행률 대시보드 추가

프롬프트:
> Step 3: 진행률 대시보드 추가
  1. 진행률 대시보드: 전체 진행률 "5/10 완료 (50%)" + 프로그레스 바
  2. 인라인 수정 기능: 더블클릭으로 편집 모드
  3. UI 애니메이션: 부드러운 전환 효과

→ 결과: 진행률 표시 + 인라인 수정이 가능한 앱

Step 4: 다크 모드 및 고급 기능

프롬프트:
> Step 4: 다크 모드 및 고급 기능
  1. 다크 모드: 토글 스위치, localStorage에 테마 저장
  2. 추가 기능: 완료 항목 일괄 삭제, 할 일 검색 기능
  3. 빈 상태 메시지: "할 일이 없습니다. 추가해보세요!"
  4. 키보드 단축키: Alt+N, Alt+1~4

→ 결과: 다크 모드 + 검색 + 단축키가 추가된 앱

Step 5: 최종 완성 및 최적화

프롬프트:
> Step 5: 최종 완성 및 최적화
  1. 데이터 내보내기/가져오기: JSON 파일
  2. 정렬 옵션: 생성일순, 카테고리순, 완료 상태순
  3. 드래그 앤 드롭으로 수동 정렬
  4. 성능 최적화: 100개 항목에서도 부드러운 성능

→ 결과: 완전한 기능의 할 일 관리 앱 완성!

클로드 코드 초기 설정 명령어

핵심 체크포인트

• ✅ 클로드 웹에서 기획(PRD), 클로드 코드에서 구현(코드) — 역할 분리
• ✅ PRD를 5단계 프롬프트로 변환하여 점진적으로 기능 추가
• ✅ 각 단계는 독립적으로 실행 가능하며, 이전 단계 결과물 위에 점진적 구성
• ✅ /init, /status, /model, /help 4가지 초기 설정 명령어 숙지

04-2 작업 재개와 효율성 높이기

한 줄 요약

세션 관리(--resume), 자동 승인(Shift+Tab), 컨텍스트 관리(/context, /compact)로 장기 프로젝트를 효율적으로 진행한다.

세션 재개 방법 3가지

방법 1: claude --resume
──────────────────────
터미널에서 'claude --resume' 입력
→ 프로젝트별 대화 목록이 표시
→ 화살표 키로 원하는 대화 선택 → Enter

방법 2: /resume (클로드 코드 실행 중)
──────────────────────────────────
클로드 코드를 먼저 실행한 후 '/resume' 입력
→ 이전 대화 목록에서 선택하여 재개

방법 3: claude --continue 또는 -c
───────────────────────────────
가장 최근의 마지막 대화를 자동으로 복구
→ 작업 중 연결이 끊기거나 터미널이 종료되었을 때 유용

자동 승인 모드 (Shift+Tab)

매번 파일 수정 권한을 묻는 게 번거로울 때:

Shift+Tab 키를 누르면:
→ "accept all edits on (shift+tab to cycle)" 표시
→ 반복적인 권한 승인 요청을 자동으로 처리
→ 다시 Shift+Tab을 누르면 일반 모드로 복귀

⚠️ 신뢰할 수 있는 프로젝트에서만 사용!

컨텍스트 관리

컨텍스트란?
= 클로드 코드가 현재 세션에서 기억하고 있는 모든 대화 내용과 작업 정보

/context — 현재 상태 확인
──────────────────────
> /context
→ 컬러 그리드로 사용량을 시각화
→ 모델: claude-sonnet-4
→ 현재 사용량: 93k / 200k 토큰 (46%)
→ 시스템 프롬프트, 도구, 메모리, 메시지, 여유 공간 비율

/compact — 대화 압축
─────────────────
> /compact
→ 대화 기록을 요약해 컨텍스트 공간 확보
→ 시스템 프롬프트, 도구, 메모리 파일은 유지
→ 메시지만 압축: 78.0k → 1.9k (97% 절약!)
→ 여유 공간: 107.4k(53.7%) → 183.4k(91.7%)

/compact 레벨 옵션:
  --level 1: 불필요한 공백이나 중복 제거
  --level 2: 변수명을 단축하고 구조를 단순화
  --level 3: 핵심 로직만 유지하고 최대한 압축

핵심 체크포인트

• ✅ --resume으로 대화 목록에서 원하는 세션을 선택해 복원
• ✅ Shift+Tab으로 자동 승인 모드 전환 (반복적 권한 요청 생략)
• ✅ /context로 토큰 사용량을 수시로 체크
• ✅ /compact로 대화를 압축하여 장기 작업 시 토큰 절약

04-3 프로젝트 개선과 작업 관리

한 줄 요약

캡처 이미지를 클로드 코드에 전달하고, @ 기호로 파일을 참조하며, /config과 /doctor로 환경을 관리한다.

캡처 이미지로 UI 개선

Step 1: Windows 캡처 도구 (Snipping Tool) 실행
Step 2: 현재 앱 화면을 캡처 → PNG로 저장
Step 3: 캡처 파일을 클로드 코드 프롬프트 창에 드래그 & 드롭
→ "[Image #1]" 메시지가 표시됨

Step 4: 프롬프트 입력
"[Image #1] 현재 디자인은 모바일에 최적화되어 있는 것 같아.
 데스크톱 환경에서도 전체 화면에서 UI를 볼 수 있도록
 디자인을 수정해 줘. 수정한 디자인은 'web_version'이라는
 새로운 폴더를 생성한 뒤, 그곳에 저장해 줘."

→ 이미지를 분석해 맥락을 파악하고 코드로 변환!

@ 기호로 파일 참조

> 클로드 코드에서 특정 파일을 직접 참조할 때 '@' 사용

예: @ CLAUDE.md 를 확인하고 프로젝트 구조를 업데이트해 줘.
→ 클로드가 CLAUDE.md 파일을 직접 읽고 분석

예: @ index.html 의 CSS를 개선해 줘.
→ 해당 파일의 내용을 컨텍스트에 포함시켜 수정

설정과 진단 명령어

/doctor 사용 예시

> /doctor
→ Claude Code 버전, Node.js 버전, 인증 상태, API 연결 등 자동 점검
→ 문제 발견 시 해결 방법까지 안내

유용한 상황:
- "왜 안 되지?" 할 때 먼저 /doctor 실행
- 새 환경에서 처음 설정한 후 점검
- 업데이트 후 정상 동작 확인

/export 사용 예시

> /export
→ 현재까지의 전체 대화 내용을 마크다운 파일로 저장
→ 작업 과정을 문서화하거나 팀원과 공유할 때 유용
→ 프로젝트의 개발 히스토리를 기록으로 남김

핵심 체크포인트

• ✅ 이미지를 드래그 & 드롭으로 전달하면 AI가 UI를 분석하고 코드로 변환
• ✅ @ 기호로 특정 파일을 직접 참조시켜 정확한 작업 가능
• ✅ /config으로 설정 변경, /doctor로 문제 진단, /export로 대화 문서화
• ✅ 클로드 코드는 멀티모달 AI 모델(Sonnet, Opus)을 사용하여 이미지도 처리

연습문제 풀이

Q1: 클로드 코드에서 프로젝트 초기 설정을 위해 자주 쓰는 명령어 4가지는?

A: /init (CLAUDE.md 생성), /status (현재 작업 상태 확인), /model (AI 모델 선택), /help (명령어 목록 확인).

Q2: /compact의 실제 동작 방식으로 올바른 것은?

A: ① "/compact는 대화 내용을 요약하여 토큰을 절약한다"가 올바르다. 압축 후에도 CLAUDE.md와 프로젝트 파일은 유지되며, 메시지만 요약된다.

Q3: 여러 대화 중 특정 대화에서 재개하고 싶을 때 사용할 명령어는?

A: --resume. 대화 목록에서 원하는 세션을 선택하여 재개할 수 있다. 가장 최근 대화를 바로 이어가려면 --continue 또는 -c를 사용.

부록 A: 용어 사전

부록 B: 핵심 비교표

클로드 코드 명령어 총정리 (3~4장)

부록 C: 추천 참고 자료 & 링크